<template>
  <div class="register-container">
    <div class="register-card">
      <h2>注册账号</h2>

      <!-- 角色切换标签（保持原有切换逻辑不变） -->
      <div class="role-tabs">
        <button
            class="role-tab"
            :class="{ active: currentRole === 'employee' }"
            @click="switchRole('employee')"
        >
          员工注册
        </button>
        <button
            class="role-tab"
            :class="{ active: currentRole === 'admin' }"
            @click="switchRole('admin')"
        >
          管理员注册
        </button>
      </div>

      <!-- 员工注册表单（新增职位选择，其他不变） -->
      <form v-if="currentRole === 'employee'" @submit.prevent="handleEmployeeRegister">
        <div class="form-item">
          <label>姓名</label>
          <input
              type="text"
              v-model="employeeForm.name"
              placeholder="请输入姓名"
              :class="{ 'invalid': errors.employee.name }"
              @blur="validateEmployeeField('name')"
          >
          <span class="error-tip" v-if="errors.employee.name">{{ errors.employee.name }}</span>
        </div>

        <!-- 新增：职位选择下拉框 -->
        <div class="form-item">
          <label>职位</label>
          <select
              v-model="employeeForm.position"
              :class="{ 'invalid': errors.employee.position }"
              @change="validateEmployeeField('position')"
          >
            <option value="">请选择职位</option>
            <option value="PROJECT_MANAGER">项目经理</option>
            <option value="LEGAL_SPECIALIST">法务专员</option>
            <option value="FINANCE_SPECIALIST">财务专员</option>
            <option value="OTHER">其他</option>
          </select>
          <span class="error-tip" v-if="errors.employee.position">{{ errors.employee.position }}</span>
        </div>

        <div class="form-item">
          <label>密码</label>
          <input
              type="password"
              v-model="employeeForm.password"
              placeholder="请输入6-16位密码"
              :class="{ 'invalid': errors.employee.password }"
              @blur="validateEmployeeField('password')"
          >
          <span class="error-tip" v-if="errors.employee.password">{{ errors.employee.password }}</span>
        </div>

        <button type="submit" class="submit-btn">注册员工账号</button>
        <span class="system-error" v-if="errors.employee.system">{{ errors.employee.system }}</span>
      </form>

      <!-- 管理员注册表单（完全保持不变） -->
      <form v-if="currentRole === 'admin'" @submit.prevent="handleAdminRegister">
        <div class="form-item">
          <label>用户名</label>
          <input
              type="text"
              v-model="adminForm.username"
              placeholder="请输入用户名"
              :class="{ 'invalid': errors.admin.username }"
              @blur="validateAdminField('username')"
          >
          <span class="error-tip" v-if="errors.admin.username">{{ errors.admin.username }}</span>
        </div>

        <div class="form-item">
          <label>密码</label>
          <input
              type="password"
              v-model="adminForm.password"
              placeholder="请输入6-16位密码"
              :class="{ 'invalid': errors.admin.password }"
              @blur="validateAdminField('password')"
          >
          <span class="error-tip" v-if="errors.admin.password">{{ errors.admin.password }}</span>
        </div>

        <button type="submit" class="submit-btn">注册管理员账号</button>
        <span class="system-error" v-if="errors.admin.system">{{ errors.admin.system }}</span>
      </form>

      <!-- 成功提示（保持不变） -->
      <div class="success-toast" v-if="successTip">
        {{ successTip }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

// 路由实例（保持不变）
const router = useRouter()

// 当前选中角色（保持原有切换逻辑）
const currentRole = ref('employee')

// 表单数据（仅员工表单新增position字段）
const employeeForm = ref({
  name: '',       // 原有字段
  position: '',   // 新增：职位英文键
  password: ''    // 原有字段
})
const adminForm = ref({
  username: '',   // 保持不变
  password: ''    // 保持不变
})

// 错误提示（仅员工表单新增position错误）
const errors = ref({
  employee: {
    name: '',
    position: '',  // 新增：职位错误提示
    password: '',
    system: ''
  },
  admin: {
    username: '',  // 保持不变
    password: '',  // 保持不变
    system: ''     // 保持不变
  }
})

// 成功提示（保持不变）
const successTip = ref('')

// 切换角色方法（完全保持原有逻辑）
const switchRole = (role) => {
  currentRole.value = role
  // 重置当前角色的表单和错误（逻辑不变）
  if (role === 'employee') {
    errors.value.employee = { name: '', position: '', password: '', system: '' }
  } else {
    errors.value.admin = { username: '', password: '', system: '' }
  }
  successTip.value = ''
}

// 员工字段校验（仅新增position字段校验）
const validateEmployeeField = (field) => {
  const value = employeeForm.value[field]
  errors.value.employee[field] = '' // 清空当前字段错误

  // 原有姓名校验（不变）
  if (field === 'name') {
    if (!value.trim()) {
      errors.value.employee.name = '姓名不能为空'
    } else if (value.length > 20) {
      errors.value.employee.name = '姓名不能超过20个字符'
    }
  }

  // 新增：职位校验
  if (field === 'position') {
    if (!value) { // 未选择职位时提示
      errors.value.employee.position = '请选择职位'
    }
  }

  // 原有密码校验（不变）
  if (field === 'password') {
    if (!value) {
      errors.value.employee.password = '密码不能为空'
    } else if (value.length < 6) {
      errors.value.employee.password = '密码长度不能少于6位'
    } else if (value.length > 16) {
      errors.value.employee.password = '密码长度不能超过16位'
    }
  }
}

// 管理员字段校验（完全保持不变）
const validateAdminField = (field) => {
  const value = adminForm.value[field]
  errors.value.admin[field] = ''

  if (field === 'username') {
    if (!value.trim()) {
      errors.value.admin.username = '用户名不能为空'
    } else if (value.length > 15) {
      errors.value.admin.username = '用户名不能超过15个字符'
    }
  }

  if (field === 'password') {
    if (!value) {
      errors.value.admin.password = '密码不能为空'
    } else if (value.length < 6) {
      errors.value.admin.password = '密码长度不能少于6位'
    } else if (value.length > 16) {
      errors.value.admin.password = '密码长度不能超过16位'
    }
  }
}

// 员工表单整体校验（仅新增position字段校验）
const validateEmployeeForm = () => {
  let isValid = true
  // 原有校验（不变）
  validateEmployeeField('name')
  // 新增：校验职位
  validateEmployeeField('position')
  // 原有校验（不变）
  validateEmployeeField('password')

  // 判断是否有错误（包含新增的position错误）
  if (errors.value.employee.name || errors.value.employee.position || errors.value.employee.password) {
    isValid = false
  }
  return isValid
}

// 管理员表单整体校验（完全保持不变）
const validateAdminForm = () => {
  let isValid = true
  validateAdminField('username')
  validateAdminField('password')
  if (errors.value.admin.username || errors.value.admin.password) {
    isValid = false
  }
  return isValid
}

// 错误解析（仅新增position字段匹配）
const parseError = (role, errorMsg) => {
  // 原有逻辑（不变）
  errors.value[role].system = ''
  if (!errorMsg) {
    errors.value[role].system = '注册失败，请稍后重试'
    return
  }

  // 原有字段匹配（不变）
  if (errorMsg.includes('姓名')) {
    errors.value[role].name = errorMsg
  } else if (errorMsg.includes('用户名')) {
    errors.value[role].username = errorMsg
  } else if (errorMsg.includes('密码')) {
    errors.value[role].password = errorMsg
  }
  // 新增：职位错误匹配
  else if (errorMsg.includes('职位')) {
    errors.value[role].position = errorMsg
  }
  // 其他错误（不变）
  else {
    errors.value[role].system = errorMsg
  }
}

// 员工注册提交（仅新增position字段传递）
const handleEmployeeRegister = async () => {
  // 原有前端校验（不变）
  if (!validateEmployeeForm()) return

  try {
    // 提交数据包含新增的position字段
    await axios.post('/auth/register/employee', employeeForm.value)
    // 原有成功逻辑（不变）
    successTip.value = '员工注册成功！即将跳转到登录页...'
    setTimeout(() => router.push('/login'), 1500)
  } catch (err) {
    // 原有错误处理（不变）
    const errorData = err.response?.data || {}
    const errorMsg = errorData.message || errorData.error || errorData.msg || '注册失败'
    parseError('employee', errorMsg)
  }
}

// 管理员注册提交（完全保持不变）
const handleAdminRegister = async () => {
  if (!validateAdminForm()) return

  try {
    await axios.post('/auth/register/admin', adminForm.value)
    successTip.value = '管理员注册成功！即将跳转到登录页...'
    setTimeout(() => router.push('/login'), 1500)
  } catch (err) {
    const errorData = err.response?.data || {}
    const errorMsg = errorData.message || errorData.error || errorData.msg || '注册失败'
    parseError('admin', errorMsg)
  }
}
</script>

<style scoped>
/* 原有样式保持不变，仅新增下拉框样式 */
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f2f5;
  padding: 20px;
}

.register-card {
  width: 100%;
  max-width: 400px;
  padding: 30px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  color: #333;
  margin-bottom: 25px;
}

/* 角色切换标签样式（完全不变） */
.role-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 25px;
}

.role-tab {
  flex: 1;
  padding: 10px 0;
  background-color: #f5f5f5;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
}

.role-tab.active {
  background-color: #1677ff;
  color: #fff;
}

/* 表单样式（仅新增下拉框样式） */
.form-item {
  margin-bottom: 20px;
}

.form-item label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: #333;
}

/* 原有输入框样式（不变） */
.form-item input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s;
}

/* 新增：下拉框样式（与输入框保持一致） */
.form-item select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background-color: #fff;
  transition: border-color 0.3s;
}

/* 聚焦样式（输入框和下拉框保持一致） */
.form-item input:focus,
.form-item select:focus {
  outline: none;
  border-color: #1677ff;
}

/* 错误状态样式（新增下拉框错误样式） */
.form-item input.invalid,
.form-item select.invalid {
  border-color: #ff4d4f;
}

/* 错误提示和按钮样式（完全不变） */
.error-tip {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #ff4d4f;
}

.system-error {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
  color: #ff4d4f;
}

.submit-btn {
  width: 100%;
  padding: 12px 0;
  background-color: #1677ff;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #0f62d9;
}

.success-toast {
  margin-top: 15px;
  padding: 10px;
  text-align: center;
  background-color: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 6px;
  color: #52c41a;
  font-size: 14px;
}
</style>